<template>
	<view class="content">
		<Header title="我的订单" :showBack='true'></Header>
		<view class="order-list">
			<view class="order-item" v-for="(item,index) in dataList" :key="index">
				<view class="shop-header">
					<view class="shop-name">
						{{item.shop_name}}
					</view>
					<view class="order-status">
						{{item.orderstate | statusFilter}}
					</view>
				</view>
				<view class="order-content">
					<view class="left">
						<u--image :src="item.goods_image | setImgUrl" width="160rpx" height="160rpx" mode="aspectFill">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image>
					</view>
					<view class="right">
						<view class="top">
							<view class="title">{{item.goods_name}}</view>
							<!-- <view class="tip">
								<view class="icon">
									惠
								</view>
								<view>
									1元享2节试听课等，送斯伯丁篮球一个
								</view>
							</view> -->
						</view>
						<view class="price-box">
							<view class="price">
								¥ {{item.price}}
							</view>
							<view class="num">
								x1
							</view>
						</view>
					</view>
				</view>
				<view class="order-footer">
					<view class="order-no">
						{{item.order_sn}}
					</view>
					<view class="btn-group" v-if="item.orderstate == 0">
						<view class="cancle" @click="cancelOrder(item)">
							取消订单
						</view>
						<view class="use" @click="showCode(item.qrcode)">
							去使用
						</view>
					</view>
					<view class="btn-group" v-if="item.orderstate == 1">
						<view class="evaluate" @click="toEvaluate(item)">
							去评价
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 空 -->
		<view class="empty" v-if="!dataList.length">
			<image src="../../static/empty.png" style="width: 304rpx;height: 194rpx;margin-bottom: 32rpx;" mode="">
			</image>
			<text>暂无订单</text>
		</view>
		<!-- 二维码 -->
		<u-popup :show="show" :round="10" mode="center" @close="closeCode()">
			<view class="modal-box">
				<view class="modal-title">
					到店出示二维码，由店家核销操作
				</view>
				<view class="QC-box">
					<image :src="qrcode" style="width: 300rpx;height: 300rpx;" mode=""></image>
					<view class="save" @click="save()">
						保存图片
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 取消订单确认框 -->
		<u-modal ref="uModal" :showCancelButton="true" :show="showCancelOrder" title="温馨提示" content='确定取消该订单？' @confirm="confirm" @close="showCancelOrder = false" @cancel="showCancelOrder = false"></u-modal>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	export default {
		data() {
			return {
				show: false,
				dataList: [],
				userInfo: {},
				qrcode:'',
				showCancelOrder:false,
				cancelOrderNo:''
			}
		},
		components: {
			Header
		},
		filters: {
			statusFilter(val) {
				switch (val) {
					case 0:
						return '未完成'
					case 1:
						return '已完成'
					case 2:
						return '已取消'
					default:
						return ''
				}
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 去评价
			toEvaluate(item){
				console.log(item)
				this.$u.route('/pages/evaluate/evaluate',{id: item.id})
			},
			// 关闭二维码弹窗
			closeCode(){
				this.show = false
				this.getOrderList()
			},
			//确定取消订单
			confirm(){
				uni.$u.http.post('/shop/cancelorder', {order_sn:this.cancelOrderNo}).then(res => {
					this.$u.toast('订单已取消')
					this.showCancelOrder = false
					this.getOrderList()
				})
			},
			// 显示取消订单
			cancelOrder(item){
				this.cancelOrderNo = item.order_sn
				this.showCancelOrder = true
			},
			// 获取个人信息
			getUserInfo() {
				uni.$u.http.post('/shop/userinfo', ).then(res => {
					this.userInfo = res.data
					this.getOrderList()
				})
			},
			// 获取订单列表
			getOrderList() {
				uni.$u.http.post('/shop/myorder', {
					user_id: this.userInfo.id
				}).then(res => {
					this.dataList = res.data
				})
			},
			// 保存
			save() {
				uni.downloadFile({ //下载
					url: this.qrcode, //图片下载地址
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
								filePath: res.tempFilePath, //图片文件路径
								success: function() {
									uni.showToast({
										title: '图片保存成功',
										icon: 'none',
									});
								},
								fail: function(e) {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none',
									});
								}
							});
						}
					}
				});
			},
			// 显示二维码
			showCode(qrcode) {
				this.qrcode = qrcode
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F5F5;
		min-height: 100vh;
	}

	.order-list {
		padding-bottom: 42rpx;
	}

	.order-item {
		background: #ffffff;
		margin-bottom: 22rpx;

		.shop-header {
			height: 84rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 30rpx 0rpx 34rpx;

			.shop-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				width: 540rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.order-status {
				font-size: 24rpx;
				font-weight: bold;
				color: #FF0303;
			}
		}

		.order-content {
			background: #FAFAFA;
			padding: 34rpx 64rpx 26rpx 30rpx;
			display: flex;
			justify-content: space-between;

			.left {
				width: 160rpx;
				height: 160rpx;
				border-radius: 18rpx;
				overflow: hidden;
			}

			.right {
				width: 456rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.top {
					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: #000000;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.tip {
						font-size: 20rpx;
						font-weight: 400;
						color: #333333;
						display: flex;
						// align-items: center;
						margin-top: 18rpx;

						.icon {
							width: 26rpx;
							height: 24rpx;
							background: #FF7200;
							border-radius: 4rpx;
							line-height: 24rpx;
							text-align: center;
							color: #FFFFFF;
							margin-right: 12rpx;
						}
					}
				}

				.price-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 40rpx;
					font-weight: bold;
					color: #FF2307;

					.num {
						font-size: 24rpx;
						font-weight: 400;
						color: #3E3836;
					}
				}
			}
		}

		.order-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 30rpx;
			height: 104rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #060606;

			.btn-group {
				display: flex;
				align-items: center;

				.cancle {
					width: 180rpx;
					height: 64rpx;
					background: #F1F1F1;
					box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 40rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #6E6E6E;
					line-height: 64rpx;
					text-align: center;
				}

				.use {
					width: 180rpx;
					height: 64rpx;
					background: linear-gradient(315deg, #56AB2F 0%, #A8E063 100%);
					box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(116, 190, 66, 0.4);
					border-radius: 40rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
				}
				
				.evaluate{
					width: 180rpx;
					height: 64rpx;
					background: #D8D8D8 linear-gradient(136deg, #FFECCA 0%, #E7BC70 100%);
					// box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(116, 190, 66, 0.4);
					border-radius: 40rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
				}
			}
		}
	}

	.modal-box {
		width: 570rpx;
		height: 638rpx;
		display: flex;
		align-items: center;
		flex-direction: column;

		.modal-title {
			margin-top: 62rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #222222;
		}

		.QC-box {
			position: relative;
			margin-top: 62rpx;
			width: 400rpx;
			height: 400rpx;
			background-image: url(@/static/border.png);
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.save {
				width: 280rpx;
				height: 56rpx;
				background: #FF8400 linear-gradient(136deg, #FFECCA 0%, #E7BC70 100%);
				border-radius: 14rpx;
				position: absolute;
				left: 60rpx;
				bottom: -16rpx;
				text-align: center;
				line-height: 56rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #232323;
			}
		}
	}

	.empty {
		width: 750rpx;
		height: 408rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 146rpx;
		// background: #FAFAFA;
		font-size: 32rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #232323;
	}
</style>
